$(function () {
    // 1. 表单校验
    // 使用 bootstrapValidator.js 进行校验
    // 校验规则
    // 1. 用户名密码非空
    // 2. 用户名长度 2-6位
    // 3. 密码长度 6- 12位
    //使用表单校验插件
    $('.login-form').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [':disabled', ':hidden', ':not(:visible)'],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',  // 图标
            invalid: 'glyphicon glyphicon-remove', // 图标
            validating: 'glyphicon glyphicon-refresh' // 这个必须有,否则图标没效果
        },

        // 3. 要校验的数据  fields: 字段
        fields: {
            // 根据变单name属性进行校验
            // 用户名"
            username: {
                //校验规则
                validdators: {
                    // 非空
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    // 长度校验
                    stringLemngth: {
                        min: 2,
                        max: 6,
                        message: '用户名必须2-6位'
                    },
                    // 扩展一个提示信息
                    callback:{
                        message:'用户名不存在'
                    }
                }
            },

            // 密码校验
            password: {
                //校验规则
                validdators: {
                    // 非空
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    // 长度校验
                    stringLemngth: {
                        min: 6,
                        max: 12,
                        message: '密码必须6-12位'
                    },
                    // 扩展一个提示信息
                    callback:{
                        message:'密码不存在'
                    }
                }
            },
        }

    });

    // 2- 重置变单检验样式
    $('.btn-reset').click(function () {
        // 通过插件实例, 调用插件提交方法,resetForm() 重置校验样式的
        $('.login-form').data('bootstrapValidator').resetForm();
    })


    // 3. 用户登录
    // 1. 点击登录按钮,获取表单数据,在表单数据校验通过情况下,向后台发送ajax请求,进行登录校验
    // 2. 接收后台响应: 
    // 登录成功: 去首页
    // 登录失败: 提示错误信息

    // $('.btn-login').click(function () {
    //     // 获取表单数据
    //     if(表单数据合理)
    //     // 发送ajax请求,进行验证
    // })


    // 插件提供  success.form.bv事件: 会在用户点击提交按钮,并且数据校验通过时触发
    $('.login-form').on('success.form.bv', function (e) {
        // 这是 submit,必须去除默认行为
        e.preventDefault();
        
        // 发送ajax请求
        $.ajax({
             type: 'post',
             url: '/employee/employeeLogin',
             data: $('.login-form').serialize(), // 找到所有带name
             dataType: 'json',
             success: function (res) {
                //  console.log(res);


                // 登录成功: 去首页
                if(res.success) {
                    location.href = './index.html';
                }
                // 登录失败: 提示错误信息
                if(res.error == 1000) {
                    // 把用户名的校验 由成功 改变失败 提示错误信息
                    $('.login-form').data('bootstrapValidator').updateStatus('username', 'INVALID', 'callback')
                }
                if(res.error == 1001) {
                    // 把用户名的校验 由成功 改变失败 提示错误信息
                    $('.login-form').data('bootstrapValidator').updateStatus('username', 'INVALID', 'callback')
                }
             }
         })
    })

});
